<template>
  <!-- index的新品上市 -->
  <div class="showProducts">
    <div class="item" v-for="(item,index) in showProductsArr" :key="index" @mouseover="hover(index)" @mouseout="out(index)">
      <a @click="goProduct(item)">
        <div class="img">
          <img :src="item.s_goods_photos[2].path" class="scenery" alt="" />
          <img :src="item.s_goods_photos[1].path" class="newproduct" alt="" />
          <img :src="item.s_goods_photos[3].path" class="hover" :class="{active:index==isShow}" alt="">
        </div>
        <div class="detail">
          <span class="new">新品上市</span>
          <h2>{{ item.name }}</h2>
          <span class="characteristic">便携可折叠 磁吸快拆设计 内置延长杆</span>
          <p>
            {{ item.desc }}
          </p>
          <span class="price">￥{{ item.price }}</span>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
          // display:'none !important',
          // styleArr:{display:this.display},
          isShow:-1,
          showProductsArr:[],
      }
  },
  
  props:['goodsList'],

  created() {

  },

  computed: {
    
  },

  watch: {
      goodsList(newValue,oldValue) {
          if(this.goodsList.lenght !== 0) {
            this.showProduct()
            console.log(newValue,oldValue);
          }
      }
  },

  methods: {
      hover(index) {
          // this.display = "block !important"
          this.isShow = index
      },
      out(index) {
          // this.display = "none !important"
          this.isShow = index
      },
      showProduct() {
        let a = this.goodsList.rows.filter(ele=>ele.id===480 || ele.id===469 ||ele.id===482);
        console.log(this.goodsList.rows);
        this.showProductsArr = a;
      },
      goProduct(item) {
        this.$router.push(`/products/${item.id}`)
      }
  }
};
</script>

<style lang="scss" scope>
.showProducts {
  // width: 398px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 398px;
    background-color: white;
    .img {
      position: relative;
      img {
        width: 100%;
      }
      .newproduct {
        width: 60%;
        position: absolute;
        top: 80px;
        left: 20%;
        z-index: 10;
      }
      .hover {
          width: 100%;
          background-color: white;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 20;
          display: none;
      }
    }
    .detail {
      margin-top: 100px;
      padding-bottom: 24px;
      font-size: 14px;
      color: #3b3e40;
      .new {
        color: #fa8c16;
      }
      h2 {
        font-weight: 600;
      }
      .characteristic {
        font-size: 12px;
      }
      p {
        height: 70px;
        margin-top: 16px;
        padding: 0 24px;
      }
      .price {
        font-size: 16px;
        display: block;
        margin: 24px 0;
      }
    }
  }
}
.active {
  display: block !important;
}
</style>